<template>
    <el-header class="forbid-select header_main">
        <div class="menu-button cursor-pointer">
            <el-icon class="menu-button-icon" @click="emits('openMenu')">
                <component :is="getIcon('ChromeFilled')"></component>
            </el-icon>
        </div>
        <el-breadcrumb class="font-auto-resize breadcrumb" separator="/">
            <transition name="animate__animated " enter-active-class="animate__lightSpeedInLeft animate__fast"
                leave-active-class="animate__fadeOutLeft animate__faster" appear mode="out-in">
                <div :key="transitionKey">
                    <el-breadcrumb-item to="/" replace>
                        <div class="flex-display-center cursor-pointer">
                            <el-icon class="tag-view-menu-icon">
                                <component :is="getIcon('HomeFilled')" />
                            </el-icon>
                            <div style="padding-left: 2px;">首页</div>
                        </div>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-for="(item, index) in currentMenu" :key="index"
                        :to="item.to ? { path: item.url } : null" replace>
                        <div :class="`flex-display-center ${item.to ? 'cursor-pointer' : ''}`">
                            <el-icon>
                                <component :is="getIcon(item.icon)" />
                            </el-icon>
                            <div style="padding-left: 2px;">{{ item.name }}</div>
                        </div>
                    </el-breadcrumb-item>
                    <transition name="animate__animated " enter-active-class="animate__fadeInRight animate__fast"
                        leave-active-class="animate__fadeOutRight animate__faster" appear mode="out-in">
                        <el-breadcrumb-item v-if="currentTabPane" :key="currentTabPane">
                            <div class="flex-display-center">
                                <el-icon>
                                    <component :is="getIcon('DArrowRight')" />
                                </el-icon>
                                <div style="padding-left: 2px;">{{ currentTabPane }}
                                </div>
                            </div>
                        </el-breadcrumb-item>
                    </transition>
                </div>
            </transition>
        </el-breadcrumb>

        <div class="icon-biji iconfont blog" @click="openBlogPage" />
        <el-avatar :size="43" class="avatar animate__swirlInFwd" :src="userAvatar" />
        <div class="time-container flex-display-center tracking-in-expand">
            <div :style="`color:${props.sseStatus ? 'rgb(0 0 0 / 74%)' : 'rgb(255 0 0 / 74%)'};text-align: center;`">
                <div>{{ userInfo?.username }}</div>
                <div>{{ now.format('YYYY-MM-DD HH:mm:ss') }}</div>
            </div>
        </div>
    </el-header>
</template>
<script setup>
import { useNow } from '@vueuse/core'
import { getIcon, pbDecrypt, pbEncrypt } from "@/utils/tools"
import router from "@/router"
import instance, { storeToRefs } from "@/pinia"
import defaultAvatar from "@/assets/image/default_avatar.png"
import { baseUrl, dmpPageUrl } from "@/utils/constant"
import { config } from "@/utils/setting"

const { userStore, tagMenuStore } = instance
const { now, pause, resume } = useNow({ controls: true, interval: 1000 })
const emits = defineEmits(["openMenu"])

const props = defineProps({ visible: { type: Boolean, default: false }, sseStatus: { type: Boolean, default: false } })

watch(() => props.visible, visible => {
    if (visible) {
        resume()
    } else {
        pause()
    }
}, { immediate: true })

const { getUserInfo: userInfo, getRouteInfo } = storeToRefs(userStore)

const userAvatar = computed(() => {
    if (userInfo?.value.sequence && userInfo?.value.avatar) {
        return baseUrl + "/file/get/avatar/" + userInfo.value.avatar + "?sign=ad8s23r4fe8w3&preview&cache"
    } else {
        return defaultAvatar
    }
})

let currentMenu = $ref([])
let transitionKey = $ref("")
const tabPane = tagMenuStore?.getTabPane
const currentTabPane = $computed(() => tabPane[router.currentRoute.value.fullPath])

watch(() => router.currentRoute.value, (route) => {
    if (route.meta.onTag) {
        const url = route.path
        transitionKey = route.fullPath
        currentMenu = []
        for (let parentMenu of getRouteInfo.value.menu) {
            const children = parentMenu.children
            const childrenUrl = children.map(item => item.url)
            const include = childrenUrl.includes(parentMenu.url)
            for (let childrenMenu of children) {
                if (childrenMenu.url === url) {
                    currentMenu.push({ name: parentMenu.name, icon: parentMenu.icon, url: parentMenu.url, to: parentMenu.url !== childrenMenu.url && include })
                    currentMenu.push({ name: childrenMenu.name, icon: childrenMenu.icon, url: childrenMenu.url, to: false })
                }
            }
        }
    }
})

let timeout = $ref(null)

const isIndex = computed(() => router.currentRoute.value.path === "/")

watch([() => config.value.showHeader, isIndex], ([show, index]) => {
    const animation = show && !index && userAvatar.value !== defaultAvatar
    const avatarEle = document.querySelector(".avatar")
    if (avatarEle) {
        avatarEle.style.animation = ""
        if (animation) {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                avatarEle.style.animation = "rotate infinite 10s linear"
            }, 2000)
        }
    }
}, { immediate: true })

const openBlogPage = () => {
    const dmp = window.open(dmpPageUrl, "dmp")
    const sendToken = (e) => {
        if (e.data === "load success" && e.origin === dmpPageUrl) {
            const token = JSON.parse(localStorage.getItem("userInfo")).token
            dmp.postMessage("token@" + pbEncrypt(pbDecrypt(token)), "*")
            window.removeEventListener("message", sendToken)
        }
    }
    window.addEventListener("message", sendToken)
}
</script>
<style scoped>
.header_main {
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    width: 100%;
    background: rgba(255, 255, 255, .3);
    position: relative;
    backdrop-filter: var(--overlay-background-filter-blur);
    display: flex;
    align-items: center;
    transition: all .5s ease-in-out !important;
    animation-duration: 1s;
}

.withHeader .header_main {
    height: 50px !important;
    opacity: 1 !important;
}

.menu-button {
    width: calc(var(--font-size) * 3);
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-button-icon {
    font-size: calc(var(--font-size) * 1.5);
    padding-left: 10px;
    color: rgb(30 135 213 / 70%);
}

.breadcrumb {
    height: 100%;
    display: flex;
    align-items: center;
    width: calc(100% - var(--font-size) * 13 - 63px);
}

.time-container {
    height: 100%;
    width: calc(var(--font-size) * 10);
}

:deep(.el-breadcrumb__inner a),
:deep(.el-breadcrumb__inner.is-link) {
    color: var(--el-text-color-regular);
    font-weight: normal;
}

:deep(.el-breadcrumb__inner) {
    cursor: default !important;
}

.tracking-in-expand {
    animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both;
    animation-delay: .5s;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -.5em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        opacity: 1
    }
}

:deep(.avatar) {
    margin: 0 10px;
    z-index: 1;
    animation-delay: .3s;

    @media screen and (max-width: 1000px) {
        display: none;
    }
}

:deep(.blog) {
    font-size: 30px;
    color: rgb(70 130 180 / 49%);
    /* padding-right: 20px; */
    /* margin-right: 20px; */
    width: 50px;
    display: flex;
    padding-top: 3px;
    /* height: 100%; */
    align-items: center;
    justify-content: center;
}
</style>
